import { useHistory } from "react-router-dom";
import React, { Fragment, useState } from "react";
import { Input, Select, Button, Table, Switch, Space, Popconfirm } from "antd";
import { AppstoreOutlined, PicRightOutlined } from "@ant-design/icons";

import TimeDetail from "./../../../components/TimeDetail";
import {
  getActList,
  updateIsshow,
  deleteAct,
  deleteMore,
  searchAct,
} from "./../../../api/activity";

const { Option } = Select;

function Activitymanager(props) {
  const history = useHistory(); // 跳转传参
  const [search, setSearch] = useState("");
  const [iptvalue, setIptvalue] = useState();
  const [activitys, setActivitys] = useState([]);

  const [selectedRowKeys, setSeletRowKeys] = useState([]);
  const onSelectChange = (selectedRowKeys, selectedRow) => {
    setSeletRowKeys(selectedRowKeys);
    console.log(selectedRowKeys); // 选中活动的id
  };

  // 全选
  const rowSelection = {
    selectedRowKeys, //当前页面选中的项
    onChange: onSelectChange, //获取选中的值
  };
  // 批量删除
  const delMore = () => {
    console.log(selectedRowKeys);
    deleteMore(selectedRowKeys).then(res => {
        if(res.data.code) {
            getActList().then(res => {
                setActivitys(res.data.data)
            })
        }
    })
  };

  useState(() => {
    getActList().then((res) => {
      setActivitys(res.data.data);
    });
  }, []);

  const goDetail = (text) => {
    history.push("/promotion/editactivity?activityid=" + text);
  };

  const handleChange = (value) => {
    console.log(value);
    setSearch(value);
  };

  const iptChange = (e) => {
    // console.log(e.target.value);
    setIptvalue(e.target.value);
  };
  const goDelete = (activityid, index) => () => {
    console.log(activityid);
    deleteAct({ activityid: activityid }).then((res) => {
      let arr = JSON.parse(JSON.stringify(activitys));
      arr.splice(index, 1);
      setActivitys(arr);
    });
  };
  const cancel = () => {};
  // 筛选活动
  const searching = () => {
    console.log("点击搜索");
    console.log(search, iptvalue);
    searchAct({
      status: search,
      search: iptvalue,
    }).then((res) => {
      console.log(res.data.data);
      setActivitys(res.data.data);
    });
  };

  const columns = [
    {
      title: "序号",
      align: "center",
      render: (text, record, index) => (
        <span>{(current - 1) * pageSize + index + 1}</span>
      ),
    },
    {
      title: "活动名称",
      dataIndex: "title",
      align: "center",
      key: "activityid",
    },
    {
      title: "列表图",
      dataIndex: "listimg",
      align: "center",
      key: "activityid",
      render: (text, record, index) => (
        <img src={text} alt="" style={{ height: "80px" }} />
      ),
    },
    {
      title: "开始时间",
      dataIndex: "startTime",
      align: "center",
      key: "startTime",
      render: (text, record, index) => {
        return <TimeDetail time={text} />;
      },
    },
    {
      title: "结束时间",
      dataIndex: "endTime",
      align: "center",
      key: "endTime",
      render: (text, record, index) => {
        return <TimeDetail time={text} />;
      },
    },
    {
      title: "状态",
      dataIndex: "status",
      align: "center",
      key: "activityid",
    },
    {
      title: "上架",
      dataIndex: "isshow",
      key: "activityid",
      render: (text, record, index) => {
        return (
          <Switch
            checked={text}
            defaultChecked
            onChange={(checked) => {
              console.log(checked, index);
              updateIsshow({
                activityid: record.activityid,
                isshow: checked,
              }).then((res) => {
                // const arr = activitys;
                let arr = JSON.parse(JSON.stringify(activitys));
                arr[index].isshow = checked;
                setActivitys(arr);
              });
            }}
          />
        );
      },
    },
    {
      title: "操作",
      align: "center",
      dataIndex: "activityid",
      render: (text, record, index) => {
        return (
          <Space>
            <span
              style={{ color: "#f00", cursor: "pointer" }}
              onClick={() => goDetail(text)}
            >
              编辑
            </span>

            <Popconfirm
              title="确定删除?"
              onConfirm={goDelete(
                record.activityid,
                (current - 1) * pageSize + index
              )}
              onCancel={cancel}
              okText="确定"
              cancelText="取消"
            >
              <span style={{ color: "#f00", cursor: "pointer" }}>删除</span>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];
  //分页设置
  const [pageSize, setPageSize] = useState(5);
  const [current, setCurrent] = useState(1);

  return (
    <Fragment>
      <h1 className="title">活动管理</h1>
      <div className="active_div">
        <div className="pick_head">
          <AppstoreOutlined />
          筛选
        </div>
        <div className="pick">
          <Input
            placeholder="输入标题或关键字"
            className="ipt"
            onChange={iptChange}
          ></Input>
          <span className="activity">活动状态</span>
          <Select
            defaultValue="请选择"
            style={{ width: 160 }}
            onChange={handleChange}
            className="selectAct"
          >
            <Option value="全部">全部</Option>
            <Option value="未开始">未开始</Option>
            <Option value="进行中">进行中</Option>
            <Option value="已结束">已结束</Option>
          </Select>
          <span className="pick_search" onClick={searching}>
            筛选
          </span>
        </div>
      </div>
      <div className="pick2">
        <PicRightOutlined />
        活动列表
        <Button type="primary" onClick={delMore}>
          批量删除
        </Button>
        <Button
          type="default"
          danger
          className="newAct"
          onClick={() => props.history.push("/promotion/addactivity")}
        >
          新增活动
        </Button>
      </div>
      <Table
        rowSelection={rowSelection}
        dataSource={activitys}
        columns={columns}
        rowKey={(record) => record.activityid}
        bordered={true}
      />
    </Fragment>
  );
}

export default Activitymanager;
